<template>
    <div class="box">
        <h6>角色列表</h6>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 添加按钮 -->
            <el-button class="btn1" type="primary" @click="addorle">添加角色</el-button>
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">

                <el-table-column type="expand">

                    <template slot-scope="scope">
                        <!-- 权限 -->
                        <el-row :class="[i == 0 ? '' : 'bo']" :gutter="20" :span="24"
                            v-for="(item, i) in scope.row.children" :key="item.id">
                            <!-- 一级 -->
                            <el-col :span="4" style="margin-top: 10px;">
                                <div class="grid-content bg-purple">
                                    <el-tag closable @close="dels(scope.row, item)">{{ item.authName }}</el-tag>
                                    <i class="el-icon-caret-right"></i>
                                </div>
                            </el-col>
                            <el-col :span="20">
                                <el-row>
                                    <el-col :span="24">
                                        <!-- 二级 -->
                                        <el-col :span="4" style="border-left: 1px solid #ccc;">
                                            <div class="grid-content bg-purple" v-for="tm in item.children" :key="tm.id"
                                                style="margin:10px 20px;">
                                                <el-tag closable type="success" @close="dels(scope.row, tm)">{{
                                                    tm.authName
                                                }}</el-tag>
                                                <i class="el-icon-caret-right"></i>
                                            </div>
                                        </el-col>
                                        <!-- 三级 -->
                                        <el-col :span="20" v-for="tm in item.children" :key="tm.id"
                                            style="margin-top: 10px;">
                                            <span style="margin:5px;" class="grid-content bg-purple"
                                                v-for="me in tm.children" :key="me.id">
                                                <el-tag closable type="warning" @close="dels(scope.row, me)">{{
                                                    me.authName
                                                }}</el-tag>
                                            </span>
                                        </el-col>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>

                    </template>

                </el-table-column>

                <el-table-column type="index" label="#" prop="id">
                </el-table-column>
                <el-table-column label="角色名称" prop="roleName">
                </el-table-column>
                <el-table-column label="角色描述" prop="roleDesc">
                </el-table-column>
                <el-table-column label="操作" prop="desc">
                    <template slot-scope="scope">
                        <!-- 编辑 -->
                        <el-button size="mini" class="el-icon-edit" type="primary"
                            @click="handleEdit(scope.$index, scope.row)">&nbsp;编辑</el-button>
                        <!-- 删除 -->
                        <el-button size="mini" type="danger" class="el-icon-delete"
                            @click="handleDelete(scope.$index, scope.row)">&nbsp;删除</el-button>
                        <!-- 分配权限 -->
                        <el-button size="mini" class="el-icon-s-tools" type="warning"
                            @click="Edit(scope.$index, scope.row)">&nbsp;分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--  删除角色权限提示框 
                                        <el-dialog title="提示" :visible.sync="ssion" width="30%" :before-close="handleClose">
                                            <span>确定要删除吗?</span>
                                            <span slot="footer" class="dialog-footer">
                                                <el-button @click="ssions(1)">取 消</el-button>
                                                <el-button type="primary" @click="ssions(2)">确 定</el-button>
                                            </span>
                                        </el-dialog> -->

            <!-- 添加用户弹框 -->
            <el-dialog :title="this.addEdit ? '添加用户' : '编辑用户'" :visible.sync="dialogVisible" width="30%"
                :before-close="handleClose">
                <!-- 表单验证 -->
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                    <el-form-item label="角色名称" prop="roleName">
                        <el-input v-model="ruleForm.roleName"></el-input>
                    </el-form-item>

                    <el-form-item label="角色描述" prop="roleDesc">
                        <el-input v-model="ruleForm.roleDesc"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="resetForm('ruleForm')">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 权限分配框 -->
            <el-dialog title="分配权限" :visible.sync="assignment" width="70%" :before-close="handleClose">
                <!-- 二级权限 -->
                <el-tree :data="data" :props="{ children: 'children', label: 'authName' }" show-checkbox
                    :default-checked-keys="arr" :default-expand-all="true" :highlight-current="true" node-key="id"
                    ref="tree">
                </el-tree>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="assignment = false">取 消</el-button>
                    <el-button type="primary" @click="addRoles">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>



// 权限请求
import { Permissions, addrl, Editrold, Del, rolesPom, prmion, roles } from '../request/Api'
export default {
    data() {
        return {
            // 删除角色权限弹框
            ssion: false,
            // 权限分配弹出框
            assignment: false,
            // 删除弹出框
            dele: false,
            // 添加编辑框
            addEdit: true,
            // 表单验证
            ruleForm: {
                roleDesc: '',
                roleName: ''
            },
            rules: {
                roleName: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                ],
                roleDesc: [
                    { required: true, message: '请输入用户描述', trigger: 'blur' },
                ],
            },
            // 表格
            tableData: [{
                roleDesc: '',
                roleName: '',
            }],
            // 添加用户表格
            dialogVisible: false,
            // 修改框内容
            Editss: [],
            data: [],
            arr: [],
            // 添加权限第一个参数
            Editid: null,
        }
    },
    created() {
        this.getlist()
        this.prm()
    },
    //监听属性
    watch: {
        assignment(val) {
            console.log(val);
            if (val == false) {
                this.arr = []
                console.log(this.arr);
            }
        },
        deep: true,
    },
    methods: {
        // 确定添加权限
        addRoles() {
            this.assignment = false

            let rids = this.$refs.tree.getCheckedKeys()
            let rid = this.$refs.tree.getHalfCheckedKeys()
            let arrs = [...rid, ...rids].join(',')
            console.log(arrs);
            roles({ roleId: this.Editid, rids: arrs }).then(res => {
                console.log(res);
                this.getlist()
            })
            // console.log('添加完成');
        },
        // 权限列表
        async prm() {
            let { data } = await prmion("tree");
            this.data = data.data
            console.log(data.data);
        },
        // 删除角色权限
        async dels(row, ROle) {
            console.log(row, ROle);
            // 删除后弹框默认展开
            let result = await this.$confirm('您确定要删除吗？', "温馨提示").catch(err => console.error(err))
            console.log(result);
            if (result != "confirm") return;
            // 解构赋值删除服务器端的数据
            let { data } = await rolesPom(row, ROle).catch(err => console.error(err))
            if (data.meta.status !== 200) {
                return this.$message({
                    message: '删除权限失败！',
                    type: 'error'
                })
            }
            row.children = data.data
            console.log(data);
            // this.getlist()
            // 删除后弹框闭合
            // this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            // }).then(() => {
            //     this.ssion = true
            //     rolesPom({ roleld: row.id, rightld: ROle.id }).then(res => {
            //         this.getlist()
            //     })
            //     this.$message({
            //         type: 'success',
            //         message: '删除成功!'
            //     });
            // }).catch(() => {
            //     this.$message({
            //         type: 'info',
            //         message: '已取消删除'
            //     });
            // });
        },
        getlist() {
            // 页面渲染
            Permissions().then(res => {
                this.tableData = res.data.data
            })
        },

        // 表单验证
        submitForm(formName) {
            if (this.addEdit) {
                // 添加用户
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogVisible = false
                        addrl({ roleName: this.ruleForm.roleName, roleDesc: this.ruleForm.roleDesc }).then(res => {
                            this.getlist()
                        })
                        this.$message({
                            message: '恭喜你添加成功!',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('添加失败!');
                        return false;
                    }
                });
            } else {
                // 修改用户
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogVisible = false
                        Editrold({ roleName: this.ruleForm.roleName, roleDesc: this.ruleForm.roleDesc, id: this.Editss.id }).then(res => {
                            this.getlist()
                        })
                        console.log(this.Editss.id);
                        this.$message({
                            message: '恭喜你修改成功!',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('修改失败!');
                        return false;
                    }
                });
            }

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false
        },
        // 确定添加
        addorle() {
            this.roleName = ''
            this.roleDesc = ''
            this.dialogVisible = true
        },
        // 添加用户弹框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done()
                })
                .catch(_ => {
                });
        },
        // 编辑
        handleEdit(index, row) {
            // 数据回填
            this.ruleForm.roleName = row.roleName
            this.ruleForm.roleDesc = row.roleDesc
            this.dialogVisible = true
            this.addEdit = false
            this.Editss = row
        },
        // 删除确认框
        handleDelete(index, row) {
            this.dele = true

            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                Del({ id: row.id }).then(res => {
                    this.getlist()
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        // 删除取消
        deles1() {
            this.dele = false
        },
        // 删除确定
        deles2() {
            this.dele = false
        },
        // 权限分配
        Edit(index, row) {
            console.log(row);
            this.Editid = row.id
            this.assignment = true
            let arr3 = []
            // row.children.forEach(item => {
            //     if (item.children != undefined) {
            //         item.children.forEach(ele => {
            //             if (ele.children != undefined) {
            //                 ele.children.forEach(e => {
            //                     arr1.push(e.id)
            //                 })
            //             }
            //         })
            //     }
            // })

            function fn(arr1) {
                arr1.forEach(item => {
                    if (item.children == undefined) {
                        arr3.push(item.id)
                    } else {
                        fn(item.children)
                    }
                });
            }
            fn(row.children)
            // console.log(arr1);
            this.arr = arr3
            this.prm()
            console.log(this.arr);
        }
    },
}
</script>
<style lang="scss" scoped>
.bo {
    border-top: 1px solid #ccc;
}

// 权限
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

// 表格
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

// 卡片
.box-card {
    width: 96%;
    margin: 25px auto;

    // 添加按钮
    .btn1 {
        margin: 10px;
        float: left;
    }
}
</style>